{% extends "base.html" %}

{% block title %}仪表板{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- 页面标题 -->
    <div>
        <h1 class="text-3xl font-bold text-gray-900">
            <i class="fas fa-tachometer-alt mr-3 text-blue-500"></i>系统仪表板
        </h1>
        <p class="text-gray-600 mt-2">实时监控系统状态和插件运行情况</p>
    </div>

    <!-- 系统概览 -->
    <div class="grid md:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-500">
                    <i class="fas fa-server text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">系统状态</p>
                    <p class="text-2xl font-semibold text-gray-900">运行中</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-500">
                    <i class="fas fa-plug text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">活跃插件</p>
                    <p class="text-2xl font-semibold text-gray-900" id="active-count">{{ active_plugins|length }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-500">
                    <i class="fas fa-route text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">API端点</p>
                    <p class="text-2xl font-semibold text-gray-900" id="endpoint-count">0</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
                    <i class="fas fa-clock text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">运行时间</p>
                    <p class="text-2xl font-semibold text-gray-900" id="uptime">0天</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 活跃插件 -->
    <div class="bg-white rounded-lg shadow-md">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900">
                <i class="fas fa-play-circle mr-2 text-green-500"></i>活跃插件
            </h2>
        </div>
        
        <div class="p-6">
            {% if active_plugins %}
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4" id="active-plugins-grid">
                {% for plugin in active_plugins %}
                <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-puzzle-piece text-green-500 text-sm"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-gray-900">{{ plugin.info.name }}</h3>
                                <p class="text-xs text-gray-500">v{{ plugin.info.version }}</p>
                            </div>
                        </div>
                        <span class="px-2 py-1 text-xs font-semibold rounded-full status-active text-white">运行中</span>
                    </div>
                    
                    <p class="text-sm text-gray-600 mb-3">{{ plugin.info.description }}</p>
                    
                    <div class="flex flex-wrap gap-1 mb-3">
                        {% for tag in plugin.info.tags %}
                        <span class="inline-block bg-gray-100 rounded-full px-2 py-1 text-xs font-semibold text-gray-600">{{ tag }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-500">作者: {{ plugin.info.author }}</span>
                        <div class="flex space-x-2">
                            <button onclick="testPlugin('{{ plugin.name }}')" class="text-blue-600 hover:text-blue-800 text-xs">
                                <i class="fas fa-vial mr-1"></i>测试
                            </button>
                            <button onclick="stopPlugin('{{ plugin.name }}')" class="text-red-600 hover:text-red-800 text-xs">
                                <i class="fas fa-stop mr-1"></i>停止
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-8">
                <i class="fas fa-inbox text-4xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">暂无活跃插件</p>
                <a href="/plugins" class="text-blue-500 hover:text-blue-700 text-sm">去插件管理页面启动插件</a>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 系统性能 -->
    <div class="grid md:grid-cols-2 gap-6">
        <!-- API调用统计 -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-chart-line mr-2 text-blue-500"></i>API调用统计
                </h2>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">总调用次数</span>
                        <span class="text-lg font-semibold text-gray-900" id="total-calls">1,234</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">成功调用</span>
                        <span class="text-lg font-semibold text-green-600" id="success-calls">1,200</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">错误调用</span>
                        <span class="text-lg font-semibold text-red-600" id="error-calls">34</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">平均响应时间</span>
                        <span class="text-lg font-semibold text-gray-900" id="avg-response">45ms</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统资源 -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-microchip mr-2 text-purple-500"></i>系统资源
                </h2>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600">CPU使用率</span>
                            <span class="text-sm font-medium text-gray-900" id="cpu-usage">25%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: 25%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600">内存使用率</span>
                            <span class="text-sm font-medium text-gray-900" id="memory-usage">45%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600">磁盘使用率</span>
                            <span class="text-sm font-medium text-gray-900" id="disk-usage">12%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 12%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近活动 -->
    <div class="bg-white rounded-lg shadow-md">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900">
                <i class="fas fa-history mr-2 text-gray-500"></i>最近活动
            </h2>
        </div>
        <div class="p-6">
            <div class="space-y-4" id="recent-activities">
                <div class="flex items-center space-x-3">
                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                    <div class="flex-1">
                        <p class="text-sm text-gray-900">Hello World插件启动成功</p>
                        <p class="text-xs text-gray-500">2分钟前</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <div class="flex-1">
                        <p class="text-sm text-gray-900">计算器插件重新加载</p>
                        <p class="text-xs text-gray-500">5分钟前</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                    <div class="flex-1">
                        <p class="text-sm text-gray-900">系统配置更新</p>
                        <p class="text-xs text-gray-500">10分钟前</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
        updateDashboard();
        // 每30秒更新一次仪表板
        setInterval(updateDashboard, 30000);
    });

    async function updateDashboard() {
        try {
            // 获取活跃插件数量
            const response = await axios.get(`${API_BASE}/active`);
            const activePlugins = response.data;
            
            document.getElementById('active-count').textContent = activePlugins.length;
            
            // 计算总端点数量
            let totalEndpoints = 0;
            for (const plugin of activePlugins) {
                if (plugin.status && plugin.status.routes) {
                    totalEndpoints += plugin.status.routes.length;
                }
            }
            document.getElementById('endpoint-count').textContent = totalEndpoints;
            
        } catch (error) {
            console.error('更新仪表板失败:', error);
        }
    }

    async function testPlugin(pluginName) {
        try {
            showNotification(`正在测试插件 ${pluginName}...`, 'info');
            
            // 这里可以根据插件类型进行不同的测试
            if (pluginName === 'hello_world') {
                const response = await axios.get('/hello');
                showNotification(`插件测试成功: ${response.data.message}`, 'success');
            } else if (pluginName === 'calculator') {
                const response = await axios.post('/calculator/add', {
                    operation: 'add',
                    a: 10,
                    b: 5
                });
                showNotification(`插件测试成功: 10 + 5 = ${response.data.result}`, 'success');
            } else {
                showNotification('插件测试完成', 'success');
            }
        } catch (error) {
            showNotification(`插件测试失败: ${error.message}`, 'error');
        }
    }

    async function stopPlugin(pluginName) {
        if (!confirm(`确定要停止插件 ${pluginName} 吗？`)) {
            return;
        }
        
        try {
            await axios.post(`${API_BASE}/${pluginName}/stop`);
            showNotification(`插件 ${pluginName} 停止成功`, 'success');
            // 刷新页面以更新状态
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } catch (error) {
            showNotification(`停止插件 ${pluginName} 失败`, 'error');
        }
    }

    // 模拟系统运行时间
    function updateUptime() {
        const startTime = new Date('2024-01-01T00:00:00');
        const now = new Date();
        const diff = now - startTime;
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        
        document.getElementById('uptime').textContent = `${days}天${hours}小时`;
    }

    // 初始化运行时间
    updateUptime();
    setInterval(updateUptime, 60000); // 每分钟更新一次
</script>
{% endblock %} 